<template>
  <div class="app-container">

    <h3>背包</h3>
    <el-table ref="tables" v-loading="loading" :data="inventory" >
      <el-table-column type="default" width="50" align=center />
      <el-table-column label="卡牌名称" align=center width=110 prop="cardName" />
      <el-table-column label="数量" align=center prop="quantity" sort :show-overflow-tooltip=true  />
      <!-- star show-->
      <el-table-column label="星级" align="center" width="100">
      <template slot-scope="scope">
        <!-- 使用repeat函数生成相应数量的☆ -->
        <span v-html="getStarHtml(scope.row.level)"></span>
      </template>
    </el-table-column>
    </el-table>

    <!-- 如需分页 则还需要添加分页属性-->
    <!-- <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="selectRecord"
      /> -->

  </div>
</template>
<style>

</style>

<script>
import { getInventory } from "@/api/card/inventory";

export default {
  name: "card",
  data() {
    return {
      // 遮罩层 这个是没加载数据出来时候的转圈
      loading: true,
      // 全部卡列表？或者抽卡列表？或者当期卡列表
      inventory: []
    };
  },
  created() {
    this.getInventory();
  },
  methods: {
    getInventory() {
      //查询排行榜
      getInventory().then(response => {
        this.inventory = response.data;
        //放开遮罩层
        this.loading = false;

      });
    },
    getStarHtml(level) {
      if (typeof level !== 'number' || level < 1) return '';
      // 创建一个包含level个☆字符的数组，然后join成字符串
      return Array.from({ length: level }, () => '☆').join('');
    }
  },
  computed: {

  }
};
</script>
